<template>
	<!-- 收益记录 -->
	<view>
		<!-- <view class="head">
			<image src="/static/list/bg2.png" mode=""></image>
			<view class="head_main">
				<view class="text">分销佣金（元）</view>
				<view class="numbar">{{info.commission}}</view>
				<view class="commission flex-cb">
					<view class="left">
						<view class="text">剩余佣金（元）</view>
						<view class="num">{{info.commission}}</view>
					</view>
					<view class="center">
						<view class="text">今日获取佣金（元）</view>
						<view class="num">{{info.today_commission}}</view>
					</view>
					<view class="right">
						<view class="text">历史获取佣金</view>
						<view class="num">{{info.total_commission}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="list ">
			<view class="list_item flex-cb bg-white" @click="navgeta()">
				<view class="text">提现</view>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="title_recommend flex align-center">
			<view class="vertical"></view>
			<text>收益记录</text>
		</view>
		<view class="tab flex-cb bg-white">
			<text>收入来源</text>
			<text>金额</text>
			<text>时间</text>
		</view> -->
		<scroll-view scroll-y="true" class="screen-swiper " @scrolltolower="scrolltolower" v-if="list.length != 0">
			<view v-for="(item,index) in list" :key="index" class="item  bg-white">
				<view class="flex-cb items">
					<view>
						<view class="name">{{item.title||''}}</view>
						<text class="time">{{item.created_at||''}}</text>
					</view>
					<view class="numbar">+{{item.amount||' '}}</view>
				</view>
				<view class="solid"></view>
			</view>
		</scroll-view>
		<nodata v-else />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				limit:30,
				last_page:1,
				info:'',
				list:[]
			};
		},
		onLoad(){
			this.getlist()
		},
		onPullDownRefresh() {
			console.log(33);
			if(this.page == this.last_page){
				uni.stopPullDownRefresh()
				return
			}else{
				this.page++
				this.getlist()
				uni.stopPullDownRefresh()
			}
		},
		onReachBottom() {
			console.log(22);
			if(this.page == this.last_page){
				return
			}else{
				this.page++
				this.getlist()
			}
		},
		methods:{
			scrolltolower(){
				console.log(11);
				if(this.page == this.last_page){
					return
				}else{
					this.page++
					this.getlist()
				}
			},
			getlist(){
				this.$api.users_commission_records().then(res=>{
					console.log(res);
					this.last_page = res.last_page
					this.list = [...this.list,...res.list]
				})
			},
			navgeta(){
				uni.navigateTo({
					url:'./Withdrawal?yuer='+this.info.commission
				})
			}
		}
	}
</script>

<style lang="scss">
.head{
	padding: 10rpx 20rpx 0 20rpx; 
	image{
		width: 710rpx;
		height: 360rpx;
	}
	.head_main{
		width: 710rpx;
		height: 360rpx;
		padding: 26rpx;
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		color: #FFF;
		.text{
			font-size: 32rpx;
			margin-bottom: 19rpx;
		}
		.numbar{
			height: 84rpx;
			line-height: 84rpx;
			font-size: 60rpx;
			margin-bottom: 48rpx;
		}
		.commission{
			text-align: center;
			.text{
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}
			.num{
				font-size: 40rpx;
				height: 56rpx;
				line-height: 56rpx;
			}
		}
		
	}
}
.list{
	.list_item{
		height: 100rpx;
		margin-bottom: 2rpx;
		padding-left: 28rpx;
		padding-right: 30rpx;
		.text{
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}
}
.title_recommend{
		margin-left: 36rpx;
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		.vertical{
			width: 10rpx;
			height: 40rpx;
			background: #1CD699;
			border-radius: 20rpx ;
			margin-right: 15rpx;
		}
	}
.tab{
	width: 100%;
	height: 78rpx;
	padding: 20rpx 30rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 1rpx;
	text{
		width: 174rpx;
		text-align: center;
	}
}
.screen-swiper{
	height: 100vh;
	padding:20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	.item{
		padding:20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		.items{
			padding-bottom: 20rpx;
		}
		.name{
			// width: 174rpx;
			margin-bottom: 12rpx;
		}
		.numbar{
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: red;
		}
		.time{
			width: 150rpx;
			margin-bottom: 20rpx;
		}
		text{
			color: #666;
			margin-bottom: 45rpx;
		}
	}
	.item:nth-last-of-type(1){
		.solid{
			opacity: 0;
		}
	}
}
</style>
